<template>
  <div :style="{padding: '20px'}">
    <div id="main" class="chart" :style="{height:'350px',width:'100%'}" />
  </div>
</template>

<script>
import echarts from 'echarts'
import { getLp } from '@/api/data'

require('echarts/theme/macarons') // echarts theme

export default {
  name: 'BottleStatistics',
  data() {
    return {
      chartData: [],
      date: []
    }
  },
  created() {

  },
  mounted() {
    getLp(2).then((res) => {
      this.chartData = res.result.map(v => Number(v))
      this.$nextTick(() => {
        this.initChart()
      })
    })
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('main'), 'macarons')
      this.date = this.get7day()
      this.setOptions(this.chartData)
    },
    setOptions(data) {
      this.chart.setOption(
        {
          color: ['#80FFA5'],
          title: {
            text: '瓶装检测良品率'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: this.date
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '瓶装良品率',
              type: 'line',
              stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 0
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgb(128, 255, 165)'
                  },
                  {
                    offset: 1,
                    color: 'rgb(1, 191, 236)'
                  }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: data
            }
          ]
        }
      )
    },
    get7day() {
      const arr = []
      const now = new Date().getTime()
      const oneDayTime = 60 * 60 * 24 * 1000
      // 一天的秒数
      for (let i = 6; i >= 0; i--) {
        const dateItem = new Date(now - i * oneDayTime)
        const m = (dateItem.getMonth() + 1).toString().padStart(2, '0')
        const d = (dateItem.getDate()).toString().padStart(2, '0')
        arr.push(m + '-' + d)
      }
      return arr
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
